<template>
  <div class="container" @click='handelgallaryclick'>
    <div class="wrapper">
      <swiper :options="swiperOptions">
        <!-- slides -->
        <swiper-slide  v-for='(item,index) in imgs' :key='index'>
          <img class='gallary-swiperimg' :src="item">
        </swiper-slide>
        <!-- Optional controls --> 
        
      </swiper>  
      <div class="swiper-pagination"  slot="pagination"></div>
    </div>
   
  </div>
</template>

<script>
export default {
  name:'commongallary' ,
  props:{
    imgs:{
      type:Array ,
       default(){
         return []
       }
    }
  },
  methods:{
    handelgallaryclick(){
      this.$emit('close')
    }
  },
  data(){
    return{
      swiperOptions:{
        pagination:'.swiper-pagination',
        paginationType:'fraction',
        observer:true,//只要监听本元素和父元素dom结构发生变化时就重新刷新一次
        observeParents:true
      }
    }
  } 
}
</script>

<style lang="stylus" scoped>
  .container
    display:flex
    flex-direction:column 
    justify-content:center 
    z-index:99
    position:fixed 
    top:0
    bottom:0
    left:0
    right:0
    background:#000
    .wrapper
      width:100%
      overflow:hidden
      height:0
      padding-bottom:100%
      .gallary-swiperimg
        width:100%
      .swiper-pagination
        color:#fff
        bottom: 2rem

</style>
